<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>登录页面 - 光年(Light Year Admin)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
<!-- 引入ElementUI样式 -->
<link rel="stylesheet" href="css/elmentui.css">
<!-- 引入vue的库，一定要在elmentui的库文件之前 -->
<script src="js/vue.js"></script>
<!-- 引入axios网络请求库，完成后台异步请求的http通信，代替ajax请求（也可以使用） -->
<script src="js/axios.min.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="js/elmentui.js"></script>
<!-- 引入qs库，处理url参数；qs.parse 方法可以把一段格式化的字符串转换为对象格式，
qs.stringify 则和 qs.parse 相反，是把一个参数对象格式化为一个字符串。 -->
<script src="js/qs.min.js"></script>
<style>
.lyear-wrapper {
    position: relative;
}
.lyear-login {
    display: flex !important;
    min-height: 100vh;
    align-items: center !important;
    justify-content: center !important;
}
.login-center {
    background: #fff;
    min-width: 38.25rem;
    padding: 2.14286em 3.57143em;
    border-radius: 5px;
    margin: 2.85714em 0;
}
.login-header {
    margin-bottom: 1.5rem !important;
}
.login-center .has-feedback.feedback-left .form-control {
    padding-left: 38px;
    padding-right: 12px;
}
.login-center .has-feedback.feedback-left .form-control-feedback {
    left: 0;
    right: auto;
    width: 38px;
    height: 38px;
    line-height: 38px;
    z-index: 4;
    color: #dcdcdc;
}
.login-center .has-feedback.feedback-left.row .form-control-feedback {
    left: 15px;
}
</style>
</head>
  
<body>
	
	<div id="loginedapp">
		<div class="row lyear-wrapper">
		  <div class="lyear-login">
		    <div class="login-center">
		      <div class="login-header text-center">
		        <a href="index.html"> <img alt="light year admin" src="images/logo-sidebar.png"> </a>
		      </div>
		      <form action="#!" method="post">
		        <div class="form-group has-feedback feedback-left">
		          <input type="text" v-model="loginBean.username" placeholder="请输入您的用户名" class="form-control" name="username" id="username" />
		          <span class="mdi mdi-account form-control-feedback" aria-hidden="true"></span>
		        </div>
		        <div class="form-group has-feedback feedback-left">
		          <input type="password" v-model="loginBean.userpwd" placeholder="请输入密码" class="form-control" id="password" name="password" />
		          <span class="mdi mdi-lock form-control-feedback" aria-hidden="true"></span>
		        </div>
		        <div class="form-group has-feedback feedback-left row">
		          <div class="col-xs-7">
		            <input type="text" name="captcha" class="form-control" placeholder="验证码">
		            <span class="mdi mdi-check-all form-control-feedback" aria-hidden="true"></span>
		          </div>
		          <div class="col-xs-5">
		            <img src="images/captcha.png" class="pull-right" id="captcha" style="cursor: pointer;" onclick="this.src=this.src+'?d='+Math.random();" title="点击刷新" alt="captcha">
		          </div>
		        </div>
		        <div class="form-group">
		          <button class="btn btn-block btn-primary" type="button" @click="doLogin">立即登录</button>
		        </div>
		      </form>
		      <hr>
		      <footer class="col-sm-12 text-center">
		        <p class="m-b-0">Copyright © 2019 <a href="http://lyear.itshubao.com">IT书包</a>. All right reserved</p>
		      </footer>
		    </div>
		  </div>
		</div>
		
	</div>
	
	
	
	
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- 使用vue组件进行处理 -->
		<script>
			// 创建一个vue组件对象
			 var app=new Vue({
				 el:"#loginedapp",//绑定dom组件，一般使用一个div将需要绑定的dom组件包含起来
				 data:{
					 // 绑定数据结构
					 loginBean:{
						 username:"",
						 userpwd:""
					 }
					 
				 },
				 methods:{//dom组件的行为方法
					 doLogin:function(){
						 console.log("登录事件。。。。")
						 console.log(this.loginBean)
						 // 使用let声明一个局部变量  
						 // 发送post请求的数据字符串（参数）
						 let req_data=Qs.stringify(this.loginBean);
						 // 使用axios网络请求库，进行同服务器异步通信,验证用户登录的合法性
						 axios.post('http://localhost:8086/dzrg0112_springboot_vue_elementui_server/doAjaxLogin',req_data).then(function(response){
							 console.log(response.data);
							 if(response.data!=null&&response.data=='ok'){
								 console.log("登录成功")
								 window.location.href="index.html"
							 }
							 
						 }).catch(function(error){
							 console.log(error)
						 })
						 
					 },
					  resetForm(formName) {
					         this.$refs[formName].resetFields();
					       }
					 
				 }
				 
				 
				 
			 })
		</script>
</body>
</html>